<!DOCTYPE html>
<html>

<head>
    <title>Vue.js 入门</title>
</head>

<body>
    <!-- 1、准备容器 -->
    <div id="app">
        <div>小黑记事本</div>
        <input type="text" v-model="input_text">
        <button @click="newNote()">新增任务</button>
        <h4>----笔记内容-----</h4>
        <ul>
            <!-- :key="item.id"-->
            <li v-for="(item,index) in note_array"  :key="item.id">
                <span>{{item.id}}-{{item.message}}</span>
                <button @click="deleteOne(item.id)">删除</button>
            </li>
        </ul>
        <div>笔记数量： {{note_array.length}}</div>
        <button @click="clearNote()">清空笔记</button>
    </div>

    <!-- 2、引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        // Vue 实例 在全局环境，就有了Vue构造函数
        const app = new Vue({
            // 通过el 配置选择器
            el: '#app',
            data: {
                input_text: "初始笔记内容",
                note_array: [
                    { id: 1, message: "小猫第一题" },
                    { id: 2, message: "小狗第2题" },
                    { id: 3, message: "小狗第7题" },
                ],
                newNote: function () {
                    //var array_length = this.note_array.length;
                    var input_obj = {}
                    input_obj.id = this.note_array.length;
                    input_obj.message = this.input_text
                    console.log(input_obj)
                    this.note_array.unshift(input_obj)
                },
                clearNote: function () {
                    this.note_array = []
                },
                deleteOne: function (ii) {
                    console.log(ii);
                    this.note_array = this.note_array.filter(item => item.id != ii);
                }
            }
        });
    </script>
</body>

</html>